<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../js/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../../js/swiper/swiper-4.1.0.min.css">
    <link rel="stylesheet" href="../../css/flex-box.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/index.css">
</head>
<style>
    #aside {
        float: right;
        width: 302px;
        /*    margin-right: 272px;*/
        margin-right: 166px;
        margin-top: -330px;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #999;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>
<body>

<div id="app">
    <div class="header">
        <div class="nav">
            <div class="nav-bar">
                <div class="nav-left">
                    <ul>
                        <li>
                            <a href="">关于我们</a>
                        </li>
                        <li><a href="">新闻</a></li>
                        <li><a href="">赞助方</a></li>
                        <li><a href="">会员</a></li>
                        <li><a href="">企业购</a></li>
                    </ul>
                </div>
                <div class="nav-right">
                    <ul>
                        <li><a href="/browser/page/register.html" v-if="!username">注册</a></li>
                        <li><a style="color: #FE8C00" @click="login()" v-if="!username">立即登录</a></li>
                        <li><span style="color: #FE8C00;left:23px;position: relative" @click="loginOut()"
                                  v-if="username">{{username}}</span></li>
                        <li><a v-if="username" @click="loginout()">退出</a></li>
                        <li><a>我的订单</a></li>
                        <li>
                            <a class="mobile">手机端<img src="../../image/index-img/下拉.png"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layout">
            <div class="layout-in">
                <div class="left">
                    <div class="logo">
                        <a title="阿丁餐评" href="/" class="logo-food">
                            <img src="../../image/foodLogo.png">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mid">
        <!--商家信息展示区-->
        <div id="basic-inf">
            <h1 class="shop-name">{{foodList[0].categoryName}}&nbsp;&nbsp;<span
                    style="font-size: 20px">评分:{{foodList[0].score}}</span></h1>
            <div class="address1">
                <span>地址：{{foodList[0].address}}</span>
            </div>
            <div class="address1">
                <span>电话：{{foodList[0].phone}}</span>
            </div>
            <div class="address1">
                <span>营业时间：{{foodList[0].workTime}}</span>
            </div>
            <div class="address1">
                <span>话题讨论度：{{foodList[0].commentTotal}}条</span>
            </div>
            <div class="evaluate">
                <div>
                    <el-button type="danger" icon="el-icon-edit" @click="appraise(foodList[0].categoryId)">写评价
                    </el-button>
                    <el-button type="success" icon="el-icon-check" @click="down">APP下单</el-button>
                </div>
                <img src="../../image/ico1.png" style="max-width: 100%;max-height: 100%">
            </div>
        </div>
        <!--评论区-->
        <div class="comment">
            <h2 style="display: flex;justify-content: space-between">
                <a class="byfri">网友评价
                  <!--  <span style="color: #999;">({{foodList[0].commentTotal}})</span>-->
                </a>
                <!--查询-->
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                         查看评价<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">查看全部</el-dropdown-item>
                        <el-dropdown-item command="2">仅看自己</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </h2>
            <!--评价-->
            <div class="commentByUser">
                <div v-for="(user,index) in userComment">
                    <div class="headImg"></div>
                    <div class="headImgRight">
                        <div class="UserName" style="font-size: 20px;height: 40px;">{{user.userName}}</div>
                        <div class="UserPoint" style="display: flex;justify-content: space-between;width: 43%;">
                            <div>总评：{{user.rating}}</div>
                            <div>口味：{{user.taste}}</div>
                            <div>环境：{{user.envior}}</div>
                            <div>服务：{{user.servi}}</div>
                            <div>人均：{{user.money}}元</div>
                        </div>
                        <div style="display: flex">
                            <div style="height: 100%;width: 10px"></div>
                            <div class="UserEval">
                                {{user.content}}
                            </div>
                        </div>
                        <div class="UserLikeDish"></div>
                        <!--图片评论-->
                        <div class="UserImg">
                            <div class="UserImgDetail"
                                 style="padding: 10px;display: flex">
                                <div v-for="imgshow in imgList[index].image"
                                     style="width: 150px;height: 150px;margin-left: 10px;">
                                    <el-image v-if="imgshow!==null&&imgshow!==''"
                                              :src="getImage(imgshow)"
                                              :preview-src-list="[ `http://localhost:8080/common/download?name=${imgshow}` ]"
                                              style="max-width: 100%;max-height: 100%"></el-image>
                                </div>
                            </div>
                        </div>
                        <!--删除按钮-->
                        <div class="tool" v-if="user.userId===userId">
                            <span @click="delComment(user.id)">删除评论</span>
                        </div>
                        <hr>
                    </div>

                </div>
            </div>
        </div>
        <!--右侧-->
        <div id="aside">
            <div style="width: 100%;height: 50%">
                <img src="../../image/comment1.png" style="max-height: 100%;max-width: 100%">
            </div>
            <div style="width: 100%;height: 40%;margin-top: 20px">
                <img src="../../image/comment2.png" style="max-height: 100%;max-width: 100%">
            </div>
            <div style="width: 100%;margin-top: 20px;display: flex;justify-content: center;border: 1px solid #f0f0f0;background: #fff;">
                <div style="width: 80%;height: 100%">
                    <h2 class="rightItem">推荐商家</h2>
                    <div style="display: flex;flex-direction: column;" v-for="(store,index) in storeList"
                         v-if="store.categoryId!==storeId">
                        <div style="display: flex;justify-content: left;margin-top: 10px" class="rightSideStore"
                             @click="getStore(store.categoryId)">
                            <div style="width: 30%;height: 30%;">
                                <img src="../../image/storePicture.png" style="max-width: 100%;max-height: 100%">
                            </div>
                            <div style="margin-top: 20px;margin-left: 10px;display: flex;flex-direction: column;">
                                <span>{{store.categoryName}}</span>
                                <span>评分：{{store.score}}</span>
                            </div>
                        </div>
                    </div>
                    <div style="height: 20px"></div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="../../js/vue.js"></script>
<script src="../../js/common.js"></script>
<script src="../../plugins/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/login.js"></script>
<script src="../../api/category.js"></script>
<script src="../../plugins/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                storeId: '',
                foodList: {},
                username: '',
                userId: '',
                userComment: {},
                imgList: [],
                storeList: {},
                params:{
                    storeId:'',
                    userId:''
                }
            }
        },
        created() {
            //parseUrl 获取url上的参数
            this.storeId = parseUrl(decodeURI(location.search)).categoryId
            const userName = window.localStorage.getItem('user')
            if (userName) {
                this.username = JSON.parse(userName).name
                this.userId = JSON.parse(userName).id
            }
            this.initData()
        },
        methods: {
            async initData() {
                await getStoreInfoByCategoryId(this.storeId).then(res => {
                    this.foodList = res.data
                    /* console.log(this.foodList)*/
                })
                await getUserCommentByCategoryId(this.storeId).then(res => {
                    this.userComment = res.data
                    this.imgList=[]
                    for (let i in this.userComment) {
                        this.imgList.push({image: this.userComment[i].image.split(",")})
                    }
                })
                await getStoreList({}).then(res => {
                    this.storeList = res.data
                })

            },
            appraise(storeId) {
                window.open("/browser/page/foodMark/userEvaluation.html?categoryId=" + storeId)
            },
            getImage(name) {
                return 'http://localhost:8080/common/download?name=' + name
            },
            /*登录*/
            login() {
                window.location.href = "/browser/page/login.html"
            },
            /*退出登录*/
            loginout() {
                loginoutApi().then(res => {
                    if (res.code === 1) {
                        localStorage.removeItem('user')
                        window.location.href = '/browser/page/login.html'
                    }
                })
            },
            getStore(sortId) {
                this.storeId = sortId
                this.initData()
            },
            /*删除评论*/
            delComment(id) {
                this.$confirm('确认删除你的评论吗?', 'Are you sure?', {
                    confirmButtonText: 'year',
                    cancelButtonText: 'stop',
                    type: 'warning'
                }).then(() => {
                    delComment(id).then(res => {
                        if (res.code === 1) {
                            this.$message({type: 'success', message: '该评论已删除'})
                            this.initData()
                        }
                    })
                }).catch(() => {
                    this.$message({type: 'info', message: '不删了不删了'})
                })
            },
            /*提示下载APP*/
            down(){
                this.$notify({type:'success',message:'请下载APP'})
            },
            /*下拉菜单栏触发事件*/
            async handleCommand(command) {
                /*查看全部*/
                if (command==='1'){1
                    this.initData()
                }
                /*查看自己*/
                if (command==='2'){
                    await getUserByCategoryByParams({'categoryId':this.storeId,'userId':this.userId}).then(res=>{
                        if (res.code===1){
                            this.userComment = res.data
                            for (let i in this.userComment) {
                                this.imgList.push({image: this.userComment[i].image.split(",")})
                            }
                        }
                    })
                }
            }
        },
    })
</script>
</html>